<template>
    <view class="nav flex flex-wrap">
        <view class="item flex flex-center flex-column" @click="jump(item)" v-for="(item, index) in navList" :key="index">
            <view class="icon ">
                <!-- <image :src="getIcon(index)" mode="scaleToFill" /> -->
                 <image
                    src="/static/logo.png"
                    mode="scaleToFill"
                 ></image>
            </view>
            <view class="title">{{ item.title }}</view>
        </view>
    </view>
</template>
<script>
import { navList } from '@/assets/utils/constance'
export default {
    data() {
        return {
            navList
        }
    },
    methods: {
        getIcon(index) {
            return `https://picsum.photos/${20}/${20*(index+1)}`
        },
        jump(item){
            uni.switchTab({
                url: item.path
            })
        }
    },
    onLoad() {
    }
}
</script>
<style lang="scss" scoped>
    .nav{
        flex-wrap: wrap;
        gap:20rpx;
        padding: 30rpx;
        font-size: 28rpx;
        .item{
            flex-shrink: 0;
            display: flex;
            justify-content: center;
            width: calc(20% - 20rpx);
            .icon{
                background-color: #333333;
                text-align: center;
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                image{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                }
            }
            .title{
                margin-top: 8rpx;
            }
        }
    }
</style>